import React,{forwardRef,useImperativeHandle, useState} from "react";
import {Button,Input} from 'antd'
import LlxTable from 'components/LlxTable'
import {SortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import UploadPicture from 'components/Upload/index'
import AudioUpload from 'components/Upload/audio'
import UploadJson from 'components/Upload/json'
import EditJsonBook from "components/EditJsonBook";
const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

const BookContent = forwardRef((props, ref) => {
  
  const {disabled,setDataSource,dataSource,id} = props

const [isModalVisible,setIsModalVisible] = useState(false)


useImperativeHandle(ref, () => ({
  dataSource
}));

//表头配置信息
const columns = [
      {
        title: '排序',
        dataIndex: 'sort',
        width: 100,
        className: 'drag-visible',
        align: 'center',
        render: () => <DragHandle />,
      },
      {title: '图片', dataIndex: 'pictureUrl',key: 'pictureUrl', align: 'center',render: (text, record) => {
        return <div className="operate_link_group">
          <UploadPicture disabled={disabled} pictureUrl={record.pictureUrl} setPhoto={(value)=>record.pictureUrl=value}></UploadPicture>
       </div>
      }},
       {title: '音频',width: 250,dataIndex: 'audioUrl',key: 'audioUrl', align: 'center',render: (text, record) => {
      return <div className="operate_link_group" >
        <AudioUpload disabled={disabled} audio={record.audioUrl} style={{marginLeft:'20px'}} setAudio={value=>record.audioUrl=value}></AudioUpload>
     </div>
       }},
       {title: '文字', dataIndex: 'content',key: 'content', align: 'center',render: (text, record) => {
       return <div className="operate_link_group">
          <Input disabled={disabled} defaultValue={record.content} placeholder={'请输入文字'} allowClear onChange={e=>record.content = e.target.value}/>
      </div>
       }}, {title: '字幕',width: 250, dataIndex: 'captionUrl',key: 'captionUrl', align: 'center',render: (text, record) => {
       return <div className="operate_link_group"  >
        <UploadJson disabled={disabled} captionUrl={record.captionUrl} style={{marginLeft:'20px'}} setJson={(value)=>record.captionUrl=value}></UploadJson>
      </div>
       }},{title: '编辑',width: 100,dataIndex: 'active',key: 'active', align: 'center',render: (text, record) => {
      return <div className="operate_link_group">
       <Button type={'link'} disabled={disabled} onClick={()=>removeContent(record.sort)} >移除</Button>
     </div>
       }}
]

const addNewContent = () => {
  setDataSource(value=>[...value,{sort:value.length+1,key:value.length+1+''}])
}

const removeContent = (sort) => {
  setDataSource(value=>value.filter(i=>i.sort!==sort))
}

const editJson = () => {
  setIsModalVisible(true)
}


  
  return <>
    <div  style={{marginBottom:'20px'}}>
      {
        props.hideBtn?'': <>
        <Button type={'primary'} size={'small'} disabled={disabled} onClick={addNewContent}>新增</Button>
        <Button style={{marginLeft:'20px'}} disabled={disabled} type={'primary'} size={'small'}  onClick={editJson}>字幕编辑</Button></>
      }
    </div>

  <div>

<LlxTable
     selectedRowShow={false}
     height={300}
     components={true}
     paginationHide={true}
     setDataSource={setDataSource}
     columns={columns}
     dataSource={dataSource}/>
  </div>

  <EditJsonBook isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible} id={id}></EditJsonBook>

  </>
})

export default BookContent